<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>图书列表</title>
		<link type="text/css" rel="stylesheet" href="dist/css/bootstrap.min.css" th:href="@{/dist/css/bootstrap.min.css}">
		<link rel="stylesheet" type="text/css" href="css/index.css" th:href="@{/css/index.css}"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css" th:href="@{/css/animate.css}"/>
	
	</head>
	<body>
		<!--导航部分  begin-->
		<div th:replace="common/header :: header"></div>
		<!--导航部分 end-->
		<!--最顶端轮播图片 begin-->
		<div th:replace="common/carousel :: carousel"></div>
		<!--最顶端轮播图片 end-->
		<div class="container">	
			<ol class="breadcrumb">
			    <li><a href="#">图书列表</a></li>
			</ol>
		</div>
		
		<!--展示图书数据开始-->
		<div id="bookList"></div>
		<!--展示图书数据end-->
		
		<!--地址-->
		<div th:replace="common/footer :: footer"></div>

		<!-- 登录/注册模态框 -->
		<div th:replace="common/bookModal :: bookModal"></div>

	<script src="dist/js/jquery.min.js" th:src="@{/dist/js/jquery.min.js}"></script>
	<script src="js/carousel.js" th:src="@{/js/carousel.js}" type="text/javascript" charset="utf-8"></script>
	<script src="dist/js/bootstrap.min.js" th:src="@{/dist/js/bootstrap.min.js}"></script>
	<script src="js/wow.js" th:src="@{/js/wow.js}"></script>
		<script th:src="@{/js/login_reg.js}"></script> <!--引入登录与注册的js-->

	<script th:inline="javascript">
		//获取前端传来的参数
		var category = [[${category}]];

		//获取前端传来的页码的值
		//var pSize = [[${pageSize}]]; //这行代码没用 废除
	</script>

	<script type="text/javascript">
		if(!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
			new WOW().init();
		};

		$(function () {
			$("#bookList").load("/book/getBooksListData", queryData(1, '', category))
        });

		function queryData(page, pageSize, category) {
			var query = {};
			query.category = category;
			query.page = page;
			query.pageSize = (pageSize == '') ? 4 : pageSize; //默认每页显示4条记录
			return query;
        }

        function loadData(page, pageSize,category) {
            $("#bookList").load("/book/getBooksListData", queryData(page, pageSize, category))
        }

        //跳转到指定页面
        function goPage(pageSize, category) {
		    var page = $("#inputPage").val();
            $("#bookList").load("/book/getBooksListData", queryData(page, pageSize, category))
        }

        //每页显示多少个数据
		function loadDataBySize(obj) {
		    //设置每页查多少个后，要从第一页开始查
            $("#bookList").load("/book/getBooksListData", queryData(1, obj.value, category))
        }
	</script>
	</body>
</html>
